<template>
    <div>
        <el-form ref="ruleFormRef" style="max-width: 800px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" :size="formSize" status-icon>
            <el-form-item label="供应商类型" prop="SupplierType">
                <el-radio-group v-model="ruleForm.SupplierType" class="ml-4">
                    <el-radio :value="true" size="large">个人</el-radio>
                    <el-radio :value="false" size="large">企业</el-radio>
                </el-radio-group>
            </el-form-item>
            <table>
                <tr>
                    <td> <el-form-item label="负责人手机号" prop="PrincipalTelephone">
                            <el-input v-model="ruleForm.PrincipalTelephone" />
                        </el-form-item></td>
                    <td> <el-form-item label="负责人姓名:" prop="PrincipalName">
                            <el-input v-model="ruleForm.PrincipalName" />
                        </el-form-item></td>
                </tr>
                <tr>
                    <td> <el-form-item label="供应商名称:" prop="SupplierName">
                            <el-input v-model="ruleForm.SupplierName" />
                        </el-form-item></td>
                    <td> <el-form-item label="身份证:" prop="IDNumber">
                            <el-input v-model="ruleForm.IDNumber" />
                        </el-form-item></td>
                </tr>
                <tr>
                    <td :colspan="2">
                        <el-form-item label="所在地:">
                            <el-cascader size="large" :options="pcaTextArr" v-model="selectedOptions"
                                @change="handleChange" clearable />&emsp;
                            <el-input v-model="addinforadder" @change="getaddinfor(addinforadder)" class="keyword"
                                style="width: 300px;" id="keyword" />
                            <br>
                            <br>
                            <div id="container"></div>

                        </el-form-item>
                    </td>
                </tr>
                <tr>
                    <td> <el-form-item label="所属行业:" prop="IndustryInvolved">
                            <el-input v-model="ruleForm.IndustryInvolved" />
                        </el-form-item></td>
                    <td>


                    </td>
                </tr>

                <tr>
                    <td> <el-form-item label="所属单位:" prop="AffiliatedUnit">
                            <el-input v-model="ruleForm.AffiliatedUnit" />
                        </el-form-item></td>
                    <td> <el-form-item label="使用状态:" prop="UseOftate">
                            <el-radio-group v-model="ruleForm.UseOftate" class="ml-4">
                                <el-radio :value="true" size="large">使用</el-radio>
                                <el-radio :value="false" size="large">停用</el-radio>
                            </el-radio-group>
                        </el-form-item></td>
                </tr>


                <tr>
                    <td colspan="2">
                        <hr>
                        <h2><el-form-item label="服务人员:" prop="region">
                                <el-input v-model="ruleForm.ServiceStaff" />
                            </el-form-item></h2>
                    </td>
                </tr>
                <tr>
                    <td> <el-form-item label="所属市场:" prop="Market">
                            <el-input v-model="ruleForm.Market" />
                        </el-form-item></td>
                    <td> <el-form-item label="业务员:" prop="Salesman">
                            <el-input v-model="ruleForm.Salesman" />
                        </el-form-item></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <hr>

                    </td>
                </tr>
            </table>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { regionData, codeToText, pcaTextArr } from "element-china-area-data";
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { ElMessage, ElMessageBox } from 'element-plus'
import http from '@/http';
//省市区
const option = ref(regionData);


let selectedOptions = ref([] as string[]);

//获取省市区
const handleChange = (data: any) => {
    console.log(data);
    addinforadder.value = data.join(",");
    // ruleForm.SheepAddress = data.join(","); 
};
let map = null;
let autoOptions = "";

onMounted(() => {
    GoaodeInfor();
    // window._AMapSecurityConfig = {
    //     securityJsCode: "c7d32cee6a066fe7f351693136e5c814",
    // };
    // AMapLoader.load({
    //     key: "99f06413aacc3cf84634222403b27d58", // 申请好的Web端开发者Key，首次调用 load 时必填
    //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    // })
    //     .then((AMap) => {
    //         map = new AMap.Map("container", {
    //             // 设置地图容器id
    //             viewMode: "3D", // 是否为3D地图模式
    //             zoom: 11, // 初始化地图级别
    //             center: [116.397428, 39.90923], // 初始化地图中心点位置
    //         });
    //     })
    //     .catch((e) => {
    //         console.log(e);
    //     });
});

//高德
const addinforadder = ref("北京")

const getaddinfor = (val: String | any) => {
    addinforadder.value = val;
}




const GoaodeInfor = () => {
    window._AMapSecurityConfig = {
        securityJsCode: "c7d32cee6a066fe7f351693136e5c814",
    };
    AMapLoader.load({
        key: "99f06413aacc3cf84634222403b27d58", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            map = new AMap.Map("container", {
                // 设置地图容器id
                viewMode: "3D", // 是否为3D地图模式
                zoom: 11, // 初始化地图级别
                center: [116.397428, 39.90923], // 初始化地图中心点位置
                citylimit: true,  //是否强制限制在设置的城市内搜索
                autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            });
            //地图加载
            var map = new AMap.Map("container", {
                resizeEnable: true
            });
            AMap.plugin(["AMap.PlaceSearch"], function () {
                //构造地点查询类    
                var placeSearch = new AMap.PlaceSearch({

                    citylimit: false,  //是否强制限制在设置的城市内搜索
                    map: map, // 展现结果的地图实例
                    panel: "panel", // 结果列表将在此容器中进行展示。
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });

                watch(addinforadder, async (newValue) => {
                    //关键字查询
                    placeSearch.search(addinforadder.value);
                })
                // watch(addaddress.value, async (newValue) => {
                //     //关键字查询
                //     placeSearch.search(addaddress.value.address_delivery);
                // })
            });
        }).catch((e) => {
            console.log(e);
        });
}

onUnmounted(() => {

    map?.destroy();

});



interface RuleForm {
    SupplierId: string // 供应商Id
    SupplierName: string// 供应商名称、
    SupplierType: boolean//供应商类型
    PrincipalTelephone: string//负责人电话
    InputUnit: string// 录入单位
    BuildingUser: string// 使用单位
    Market: string// 所属市场、
    ServiceStaff: string// 服务人员
    CollectionFile: string// 归集档案、
    UseOftate: boolean//使用状态
    PrincipalName: string// 负责人姓名
    IDNumber: string// 身份证
    Location: string// 所在地
    IndustryInvolved: string// 所属行业
    AffiliatedUnit: string// 所属单位
    Salesman: string// 业务员
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    SupplierId: "0",// 供应商Id
    SupplierName: "",// 供应商名称、
    SupplierType: true,//供应商类型
    PrincipalTelephone: "",//负责人电话
    InputUnit: "",// 录入单位
    BuildingUser: "",// 使用单位
    Market: "",// 所属市场、
    ServiceStaff: "",// 服务人员
    CollectionFile: "",// 归集档案、
    UseOftate: true,//使用状态
    PrincipalName: "",// 负责人姓名
    IDNumber: "",// 身份证
    Location: "",// 所在地
    IndustryInvolved: "",// 所属行业
    AffiliatedUnit: "",// 所属单位
    Salesman: "",// 业务员
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    PrincipalTelephone: [
        { required: true, message: '请输入负责人手机号', trigger: 'blur' },
    ], PrincipalName: [
        { required: true, message: '请输入负责人名称', trigger: 'blur' },
    ], SupplierName: [
        { required: true, message: '请输入供应商名称', trigger: 'blur' },
    ],

})

// import {
//     useScriptTag,

// } from "@vueuse/core";

// //动态加载script  腾讯地图演示
// useScriptTag(
//     "https://map.qq.com/api/gljs?v=1.exp&key=OGQBZ-EDOC6-LD3ST-MBLI3-M53O6-UHF5K",
//     (el: HTMLScriptElement) => {
//         const TMap = (window as any).TMap; // TMap地图实例

//         let center = new TMap.LatLng(39.98412, 116.307484);
//         //定义map变量，调用 TMap.Map() 构造函数创建地图
//         const map = new TMap.Map(document.getElementById("container"), {
//             center: center, //设置地图中心点坐标
//             zoom: 15, //设置地图缩放级别
//             pitch: 43.5, //设置俯仰角
//             rotation: 45, //设置地图旋转角度
//         });

//         if (navigator.geolocation) {
//             navigator.geolocation.getCurrentPosition(
//                 function geoSuccess(event) {
//                     console.log(
//                         "获取当前经纬度",
//                         event.coords.latitude + ", " + event.coords.longitude
//                     );
//                     map.setCenter(
//                         new TMap.LatLng(event.coords.latitude, event.coords.longitude)
//                     );
//                     //创建并初始化MultiMarker
//                     new TMap.MultiMarker({
//                         map: map, //指定地图容器
//                         //样式定义
//                         styles: {
//                             //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
//                             myStyle: new TMap.MarkerStyle({
//                                 width: 25, // 点标记样式宽度（像素）
//                                 height: 35, // 点标记样式高度（像素）
//                                 anchor: { x: 16, y: 32 },
//                             }),
//                         },
//                         //点标记数据数组
//                         geometries: [
//                             {
//                                 id: "1", //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
//                                 styleId: "myStyle", //指定样式id
//                                 position: new TMap.LatLng(
//                                     event.coords.latitude,
//                                     event.coords.longitude
//                                 ), //点标记坐标位置
//                                 properties: {
//                                     //自定义属性
//                                     title: "marker1",
//                                 },
//                             },
//                         ],
//                     });
//                 },
//                 function geoError(event) {
//                     console.log("位置授权失败：" + event.code + ". " + event.message);
//                 }
//             );
//         }
//     }
// );
const submitForm = async (formEl: FormInstance | undefined) => {

    ruleForm.Location = addinforadder.value;
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {


            http.post("Organization/api/Supplier/HandleAddSupplier", ruleForm).then(res => {
                if (res.data > 0) {
                    ElMessage({
                        type: "success",
                        message: "添加成功",
                        duration: 2000
                    });
                } else {
                    ElMessage({
                        type: "error",
                        message: "添加失败",
                        duration: 2000
                    });
                }
            })



        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))
</script>
<style>
/*地图(容器)显示大小*/
#container {
    width: 100%;
    height: 500px;
}
</style>
<script>


</script>